<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta name="author" content="Auelnce,aulence@foxmail.com">
	<title>Vue事件处理</title>
	<link rel="shortcut icon" href="../img/favicon.ico">
	<link rel="bookmark" href="../img/favicon.ico">
	<link rel="stylesheet" href="../plugin/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/event.css">
</head>
<body>
	<header>
		<nav>
			<ul class="breadcrumb">
				<li><a href="../index.html">首页</a></li>
				<li class="active">Vue事件处理</li>
			</ul>
		</nav>
	</header>

	<main>
		<article>
			<h1>Vue事件处理</h1>

			<section id="app-1">
				<h2 class="section_h2">#app-1：事件的绑定方式</h2>
				<div>
                    <button 
                        type="button" 
                        class="btn btn-default"
                        v-on:click="popupBoxMsg"
                    >v-on事件</button>
                    <button 
                        type="button" 
                        class="btn btn-default"
                        @click="popupBoxMsg"
                    >@事件</button>
                    <button 
                        type="button" 
                        class="btn btn-default"
                        @click="showMsg('土拨鼠')"
                    >带参数事件</button>
                </div>

                <tips class="comment">在Vue里面事件的绑定可以通过指令“v-on:”声明，也可以简写为“@”。如果事件没有参数可以省略方法名后面的括号。如果事件需要传入参数，则需要在事件后方加上一个括号，这个参数既可以是一个字面量的值，又可以是一个变量（下一节会说明变量的情况有哪些）。</tips>
            </section>
            
            <section id="app-2">
				<h2 class="section_h2">#app-2：事件的参数</h2>
				<div>
                    <form class="form-inline">
                        <div class="form-group">
                            <input
                                type="text" 
                                v-model="userName"
                                placeholder="请输入您的姓名后点击右侧按钮"
                                class="form-control"
                            />
                        </div>
                        <button 
                            type="button" 
                            class="btn btn-default"
                            @click="helloUser(userName)"
                        >打招呼</button>
                    </form>
                </div>
                <tips class="comment">按钮点击事件中的参数来源于数据模型data（在视图中无需写成“this.userName”,只需要直接写数据名称即可）。当然这个部分也可以不需要设置参数，直接在“methods”定义的方法内去访问数据也能达到一样的效果，这里只是为了说明事件参数的可能性之一而已。</tips>
                <div>点击列表观察效果：</div>
                <ul class="programing-language">
                    <li 
                        v-for="(lang, index) in progLang"
                        @click="showProgLang(lang, index)"
                    >{{ lang }}</li>
                </ul>

                <tips class="comment">如果是为一个列表绑定事件的情况下，通常我们还可以将“v-for”内设置的名称所对应的数据作为参数传入事件内。
                    <p>实际上，Vue的事件和原生JavaScript的事件一样，可以接收ECMAScript规范所允许的任意数据类型。</p>
                </tips>
            </section>
            
            <section id="app-3" style="height: 304px;">
                <h2 class="section_h2">#app-3：通过事件直接对数据进行修改</h2>
                <div 
                    :style="eleStyle"
                    v-show="showState"
                >这是一个被控制显隐的元素</div>
                <button 
                    class="btn btn-default mt-10"
                    @click="showState = !showState"
                >切换显示</button>

                <tips class="comment">Vue的事件不仅可以使用数据源的数据作为参数，还可以不通过method对象定义的方法，直接在事件内对数据源内的数据进行操作。</tips>
            </section>
            
            <section id="app-4">
                <h2 class="section_h2">#app-4：事件对象</h2>
                <button 
                    class="btn btn-default"
                    @click="showButtonName($event)"
                >按钮1</button>
                <button 
                    class="btn btn-default"
                    @click="showButtonName($event)"
                >按钮2</button>
                <button 
                    class="btn btn-default"
                    @click="showButtonName($event)"
                >按钮3</button>
                <tips class="comment">Vue的事件也会生成事件对象，但是需要用特殊的“$event”标识符来作为传入的参数，这个事件对象和原生JavaScript的事件对象是同一个对象。每个按钮被点击之后生成的事件对象可在控制台中进行查看。</tips>
            </section>
            
            <section id="app-5">
                <h2 class="section_h2">#app-5：事件修饰符</h2>
                <a 
                    href="https://www.baidu.com" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    @click.prevent="gotoWebSite"
                >前往百度？</a>

                <tips class="comment">点击该超链接按钮后，查看HTML源码，思考产生这种现象的原因。
                    <p>通过事件对象的preventDefault()方法可以阻止HTML标签的默认事件，但是Vue不希望开发者把精力放在一些DOM的细节处理上，于是为事件添加了一系列的修饰符。更多实用的事件修饰符见<a href="https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6" target="_blank" rel="noopener noreferrer">官方文档——事件修饰符</a>的相关内容。</p>
                </tips>
            </section>
            
            <section id="app-6">
                <h2 class="section_h2">#app-6：按键修饰符</h2>
                <input
                    type="text" 
                    v-model.trim="inputContent"
                    placeholder="请输入内容后按回车键生成内容"
                    class="form-control"
                    @keydown.enter="createList"
                />
                <ul class="create-list" v-if="contentList.length">
                    <li v-for="item in contentList">{{item}}</li>
                </ul>
                <div class="no-content" v-else>
                    -- 暂未生成列表内容 --
                </div>

                <tips class="comment">在&lt;input&gt;标签上的“v-model”后方也有一个“trim”修饰符，表示清除输入内容两端可能存在的空格，这和原生JavaScript的trim()方法作用是一致的。
                    <p>而在“@keydown”后方的“enter”修饰符表示只有在按下键盘上的回车符“Enter”才会触发事件。更多实用有趣的按键修饰符见<a href="https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6" target="_blank" rel="noopener noreferrer">官方文档——按键修饰符</a>的相关内容。</p>
                </tips>
            </section>
		</article>
	</main>

	<script src="../plugin/vue.js"></script>
	<script src="../js/event.js"></script>
</body>
</html>